<template>
  <div class="header-menubtn">
    <el-icon color="#FFFFFF" @click="handleFoldClick(!isCollapse)">
      <expand v-show="isCollapse" />
      <fold v-show="!isCollapse" />
    </el-icon>
  </div>
  <strong class="text">正元智慧城市 - 运维支撑平台</strong>
  <div class="header-avatar">
    <div class="clock text">{{ NowTime }}</div>
    <!-- <el-avatar size="medium" :src="userInfo.avatar||avatar"></el-avatar> -->
    <el-avatar size="small" :src="avatar"></el-avatar>
    <el-dropdown>
      <span class="el-dropdown-link text">
        {{ userInfo.userName }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <router-link :to="{ name: 'UserCenter' }">个人中心</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import { ref, reactive, onMounted, watch, toRefs, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import moment from "moment";
import avatarDefault from "@/assets/images/avatar.png";
import { Fold, Expand } from "@element-plus/icons-vue"
import { renewal } from "@/service/index.js";
export default {
  components: {
    Fold, Expand
  },
  emits: ['handleFoldClick'],
  setup(props, context) {
    const $router = useRouter()
    const $store = useStore()
    const state = reactive({
      userInfo: computed(() => $store.state.curUserData.user),
      avatar: avatarDefault,// 方法一
      // avatar: new URL("../assets/images/avatar.png", import.meta.url).href,// 方法二
      isCollapse: false,
      NowTime: ''
    });
    const initNowTime = () => {
      setInterval(() => {
        const _day = moment().locale("zh-cn").format("YYYY-MM-DD");
        const _time = moment().locale("zh-cn").format("HH:mm:ss");
        state.NowTime = _day + " " + _time;
      }, 1000);
    }
    const count = ref(1)
    // menu控制
    const handleFoldClick = (param) => {
      state.isCollapse = param;
      context.emit("handleFoldClick", param);
    }
    // 登出
    const logout = () => {
      window.sessionStorage.setItem("token", '');
      window.sessionStorage.setItem("session", '');
      // clearLocalStorage()
      // $store.commit("resetState")
      // $store.dispatch("resetState")
      $router.push("/")
    }
    const xuqian = () => {
      renewal().then(res => {
        if (res.data.data != null) {
          window.sessionStorage.setItem("token", res.data.data.token);
        } else {
        }
      });
    }
    onMounted(() => {
      if (!state.userInfo.userName || state.userInfo.userName === "") {
        $router.push('/');
        window.sessionStorage.setItem("token", '');
      }
      // state.userInfo = JSON.parse(GetLocalStorage("userinfos")).userInfo;
      initNowTime();
    })
    return {
      ...toRefs(state),
      handleFoldClick,
      logout,
      xuqian
    }
  }
}
</script>

<style scoped>
.text {
  color: #ffffff;
  font-size: 18px;
  padding: 0 16px;
}

.header-menubtn {
  float: left;
  font-size: 25px;
  color: #333;
}

.header-avatar {
  float: right;
  /* width: 410px; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
}
</style>